<script setup>import { computed } from 'vue';

const props = defineProps({
  offsetTop: Number,
  offsetLeft: Number
})

const extraStyle = computed(() => ({
  transform: `translate(${props.offsetLeft || 0}px, ${props.offsetTop || 0}px)`,
}))
</script>

<template>
  <div class="center-container">
    <div :style="extraStyle">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="sass">

.center-container
  width: 100%
  height: 100%
  display: flex
  align-items: center
  justify-content: center
</style>